<template>
  <h1>隐藏显示练习</h1>
  <!--v-if="布尔类型值"控制元素是否显示 true显示 false隐藏-->
  <p v-if="true">张三</p>
  <p v-if="false">李四</p>
  <p>王五</p>
  <hr>
  <!--v-if的值交给响应式变量来控制 v-else与v-if取反 -->
  <p v-if="isShow">月亮</p>
  <p v-if="isShow">星星</p>
  <p v-else>太阳</p>
  <hr>
  <!-- v-if是直接在HTML中删除元素
   v-show是修改元素的CSS display:none;不会频繁的新建元素,开销较小-->
  <p v-if="false">小红</p>
  <p v-show="false">小绿</p>
</template>

<script setup>
  import {ref} from "vue";

  const isShow = ref(false);
</script>

<style scoped>

</style>